<div class="mt-[3px] flex w-[22px] shrink-0">
  {{#if this.resourceIsDocument}}
    <div
      class="hds-surface-mid mt-[3px] flex overflow-hidden rounded-sm bg-white p-px"
    >
      <img src="/images/document.png" class="h-auto w-[18px]" />
    </div>
  {{else}}
    <Favicon @url={{this.url}} />
  {{/if}}
</div>

<div class="w-full overflow-hidden">
  <TruncatedText
    data-test-resource-title
    @tagName="h4"
    class="text-body-200 font-medium text-color-foreground-strong"
    title={{this.title}}
  >
    {{this.title}}
  </TruncatedText>
  <div class="pr-6">
    <TruncatedText
      data-test-resource-secondary-text
      class="mt-px text-body-100 text-color-foreground-faint"
    >
      {{#if this.resourceIsDocument}}
        {{#if this.docType}}
          {{this.docType}}
          ·
        {{/if}}
        {{this.docNumber}}
      {{else}}
        {{this.displayURL}}
      {{/if}}
    </TruncatedText>
  </div>
</div>
